<!DOCTYPE html>
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.2</title>
    <meta name="csrf-token" content="{{csrf_token()}}">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>

    <link rel="stylesheet" href="{{URL::asset('resources/xadmin/css/font.css')}}">
    <link rel="stylesheet" href="{{URL::asset('resources/xadmin/css/xadmin.css')}}">
    <link rel="stylesheet" href="{{URL::asset('resources/xadmin/lib/layui/css/layui.css')}}">


    <script src="{{URL::asset('resources/xadmin/lib/layui/layui.js')}}" charset="utf-8"></script>
    <script type="text/javascript" src="{{URL::asset('resources/xadmin/js/xadmin.js')}}"></script>
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div class="x-nav">
          <span class="layui-breadcrumb">
            <a href="">首页</a>
            <a href="">管理员管理</a>
            <a>
              <cite>管理员列表</cite></a>
          </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                    <form class="layui-form layui-col-space5">
                        <div class="layui-inline layui-show-xs-block">
                            <input class="layui-input" autocomplete="off" placeholder="开始日" name="start" id="start">
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <input class="layui-input" autocomplete="off" placeholder="截止日" name="end" id="end">
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <input type="text" name="username" placeholder="请输入用户名" autocomplete="off"
                                   class="layui-input">
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <button class="layui-btn" lay-submit="" lay-filter="sreach"><i
                                        class="layui-icon">&#xe615;</i></button>
                        </div>
                    </form>

                </div>
                <!--  <div class="layui-card-header" style="display:none" id="hear_bar">
                     <button class="layui-btn layui-btn-danger" onclick="delAll()"><i class="layui-icon"></i>批量删除</button>
                     <button class="layui-btn" onclick="xadmin.open('添加用户','./admin-add.html',600,400)"><i class="layui-icon"></i>添加</button>
                 </div> -->
                <div style="display:none" id="hear_bar">
                    <button class="layui-btn layui-btn-danger" lay-event="delall"><i class="layui-icon"></i>批量删除
                    </button>
                    <button class="layui-btn" lay-event="add"><i class="layui-icon"></i>添加</button>
                </div>

                <div class="layui-card-body ">
                    <table class="layui-hide" id="manager_table" lay-filter="manager_table"></table>
                </div>

                <div style="display:none" id="userBar">
                    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                </div>

            </div>
        </div>
    </div>
</div>
</body>
<script>

    layui.use('jquery', function () {
        $ = layui.jquery;
        var dom = $("<div id='showalladdableavms' style='display:none;width:100%'><table id='test3' lay-filter='test'></table></div>");
        $('body').append(dom);
    });


    layui.use('table', function () {
        var table = layui.table;

        table.render({
            elem: '#manager_table'
            , page: true //开启分页
            , toolbar: '#hear_bar'
            , url: '{{URL::action('Admin\ManagerController@lst')}}'
            , request: {
                pageName: 'curr' //页码的参数名称，默认：page
                , limitName: 'nums' //每页数据量的参数名，默认：limit
            }
            , method: 'post'
            , headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}
            , cellMinWidth: 80
            , parseData: function (res) { //res 即为原始返回的数据
                return {
                    "code": res.sta, //解析接口状态
                    "msg": res.mess, //解析提示文本
                    "count": res.count, //解析数据长度
                    "data": res.data //解析数据列表
                };
            }
            , cols: [[
                {type: 'checkbox'}
                , {field: 'id', title: 'ID', sort: true, width: 70}
                , {field: 'username', title: '登录名', width: 130}
                , {
                    field: 'gender', title: '性别', sort: true, width: 75, templet: function (d) {
                        if (d.gender == '1') d.gender = '男'
                        else if (d.gender == '2') d.gender = '女'
                        else d.gender = '保密'
                        return d.gender
                    }
                }
                , {field: 'mobile', title: '联系方式'}
                , {field: 'email', title: '邮箱', minWidth: 150}
                , {field: 'role_id', title: '角色', width: 150, sort: true}
                , {field: 'created_at', title: '加入时间', sort: true}
                , {
                    field: 'status', title: '状态', templet: function (d) {
                        if (d.status == '1') d.status = '未启用'
                        else if (d.status == '2') d.status = '已启用'
                        return d.status
                    }
                }
                , {fixed: 'right', title: '操作', toolbar: '#userBar', width: 150, align: 'center'}
            ]]

        });

        //监听头部工具栏事件
        table.on("toolbar(manager_table)", function (obj) {
            var checkStatus = table.checkStatus('manager_table')

            switch (obj.event) {
                case 'add':
                    //layer.msg('add');
                    xadmin.open('添加用户', '{{url('admin/manager/add')}}', 700, 500)
                    break;
                case 'delall':
                    var ids = [];
                    num = checkStatus.data.length
                    if (num != 0) {
                        for (var i = 0; i < num; i++) {
                            ids.push(checkStatus.data[i].id)
                        }
                        layer.confirm('真的删除吗？', {
                            icon: 3,
                            skin: 'layer-ext-moon',
                            btn: ['确认', '返回'], //按钮
                        }, function () {
                            $.ajax({
                                url: '{{URL::action('Admin\ManagerController@del')}}'
                                , type: 'post'
                                , headers: {
                                    'X-CSRF-TOKEN': $("meta[name='csrf-token']").attr('content')
                                }
                                , data: {del_id: ids, del_num: 'several'}
                                , success: function (data) {
                                    if (data.status == 'ok') {
                                        layer.msg("删除了" + data.nums + "条数据", {
                                            icon: 6,//成功的表情
                                            time: 1000
                                        }, function () {

                                            //obj.del();
                                            $(".layui-form-checked").not('.header').parents('tr').remove();

                                        });

                                    } else {
                                        layer.msg('Error', {
                                            icon: 5//失败的表情
                                            , time: 1000
                                        })
                                    }

                                }
                            })

                        })
                    }
                    else {
                        layer.msg("至少选择一个！")
                    }
                    //break;
                    break;

            }
        });
        //监听复选框
        // table.on('checkbox(manager_table)', function(obj){ //注：edit是固定事件名，test是table原始容器的属性 lay-filter="对应的值"
        //     console.log(obj.checked); //当前是否选中状态
        //     console.log(obj.data); //选中行的相关数据
        //     console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
        // });
        //监听工具条
        table.on('tool(manager_table)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
            // 获取所在行的id
            console.log(data['id'])
            console.log(obj);
            if (layEvent === 'del') { //删除
                layer.confirm('真的删除吗？', {
                    icon: 3,
                    skin: 'layer-ext-moon',
                    btn: ['确认', '返回'], //按钮
                }, function () {
                    $.ajax({
                        url: '{{URL::action('Admin\ManagerController@del')}}',
                        type: 'post',
                        data: {del_id: data['id'], del_num: 'one'},
                        headers: {
                            'X-CSRF-TOKEN': $("meta[name='csrf-token']").attr('content')
                        },
                        beforeSend: function () {
                            this.layerIndex = layer.load(0, {shade: [0.5, '#393D49']});
                        },
                        success: function (data) {
                            if (data.status == 'error') {
                                layer.msg('Error', {
                                    icon: 5//失败的表情
                                    , time: 1000
                                })
                                //return ;
                            } else {
                                layer.msg('Successful Delete!', {
                                    icon: 6,//成功的表情
                                    time: 1000
                                }, function () {
                                    // location.reload();
                                    obj.del();

                                });
                            }
                        },
                        complete: function () {
                            layer.close(this.layerIndex);
                        }
                    })
                })
            } else if (layEvent === 'edit') { //编辑
                console.log(data['id']) //获取要修改行的ID

                // var baseUrl = 'www.google.com'
                // var a = 1, b = 'request', c = true
                // var finalUrl = baseUrl + '?a=' + a + '&b=' + b + '&c=' + c
                // console.log(finalUrl)
                var edit_id = data['id'];
                //var Url='\{\{url(\'admin\/manager\/edit\',[\'id\'=>'+edit_id+'])}}'
                //console.log(Url)
                //var lara_Url='\{\{url(\'admin\/manager\/edit\/'+edit_id+')}}'


                //js先得到本机IP，解决ip不同资源访问失败bug，
                //用laravel框架自带的方法是没有问题的，这里比较特殊
                //localhostPath--->http://192.168.0.106
                var curWwwPath = window.document.location.href;
                var pathname = window.document.location.pathname;
                var pos = curWwwPath.indexOf(pathname);
                var localhostPath = curWwwPath.substring(0, pos);
                // layer.alert(localhostPath)


                var URL = localhostPath + '/lhlsite/laravel/public/admin/manager/edit/' + edit_id
                //var url='http://192.168.0.106/laravel/public/admin/manager/edit/'+edit_id
                console.log(URL)
                xadmin.open('修改信息', URL, 800, 500);

                //layer.msg('edit')
                //同步更新缓存对应的值
                obj.update({

                    // username: '123'
                    // ,title: 'xxx'
                });
            }
        });


    });


    /*用户-停用*/
    function member_stop(obj, id) {
        layer.confirm('确认要停用吗？', function (index) {

            if ($(obj).attr('title') == '启用') {

                //发异步把用户状态进行更改
                $(obj).attr('title', '停用')
                $(obj).find('i').html('&#xe62f;');

                $(obj).parents("tr").find(".td-status").find('span').addClass('layui-btn-disabled').html('已停用');
                layer.msg('已停用!', {icon: 5, time: 1000});

            } else {
                $(obj).attr('title', '启用')
                $(obj).find('i').html('&#xe601;');

                $(obj).parents("tr").find(".td-status").find('span').removeClass('layui-btn-disabled').html('已启用');
                layer.msg('已启用!', {icon: 5, time: 1000});
            }

        });
    }


</script>

</html>